<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas动画</title>
		<style type="text/css">
			#can{
				display: block;
				margin:10px auto;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="800" height="600"></canvas>
		<script type="text/javascript">
			let dom = document.getElementById("can")
			let can = dom.getContext("2d")
			let x = 10,y = 10
			
			
			setInterval(()=>{
				can.clearRect(0,0,dom.width,dom.height);
				x += 2
				can.beginPath()
				can.fillStyle = "orange"
				can.arc(x,y,10,0,2*Math.PI)
				can.fill()
			},30)
		</script>
	</body>
</html>
